<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        cursor: no-drop;
        background-color: rgb(0, 0, 0);
    }
    form{
        color: rgb(255, 255, 255);
    }
    form input:hover{
       background-color: rgb(255, 0, 0);
       color: rgb(0, 0, 0);   
    }
</style>
<body>
    
    <form action="" name = "myForm"  onsubmit="return validateForm()" method="get">

        <fieldset>
            <legend>基础信息</legend>
      <p><label  for="uername">用户:</label>
         <input inputmode="uername" name = "fname" type="text" >
      </p>

      <p>密码: <input type="password" value="请输入用户名" ></p>

      <p>确认密码: <input type="password" value="请输入用户名"></p>

      <p>密码提示问题: <select name="city" id="" style="height: 30px;">
            <option value="1">你的小学名字是什么?</option>
            <option value="2">你的父亲叫什么?</option>
            <option value="3">你的出生日期是多少?</option>
        </select>
    </p>

    <p>密码提示答案: <input type="text"></p>
            
    <p>性别: <input  id="sex1" type="radio" name="sex" value="男" >
             <label for="sex1">男</label>
             <input id="sex2" type="radio" name="sex" value="女">
             <label for="sex2">女</label>
    </p>

    <p>年龄: <input type="text"></p>

    <p>籍贯: <select name="city2" id=""  >
                <option value="01">请选择</option>
                <option value="02">江西省</option>
                <option value="03">湖南省</option>
                <option value="04">广东省</option>
                <option value="05">山东省</option>
                <option value="06">香港</option>
                <option value="07">台湾省</option>
                <option value="08">湖北省</option>
                <option value="09">河南省</option>
                <option value="010">河北省</option>
                <option value="011">浙江省</option>
            </select>省/直辖市

            <select name="city3" id="">
                <option value="001">请选择</option>
                <option value="002">北京市</option>
                <option value="003">天津市</option>
                <option value="004">上海市</option>
                <option value="005">重庆市</option>
            </select>
        </p>
</fieldset>  
<fieldset>
    <legend>次要信息</legend>   
        <p>爱好: <input id="link1" type="checkbox" name="link" value="1">
                 <label for="link1">冲浪</label>
                 <input id="link2" type="checkbox" name="link" value="2">
                 <label for="link2">学习</label>
                 <input id="link3" type="checkbox" name="link" value="3">
                 <label for="link3">睡觉</label>
                </p>

        <p>个人介绍: <textarea name="text" id="" cols="30" rows="10"></textarea></p>

        <p>上传头像: <label>上传头像:</label>
            <input type="text">
            <input type="file"></p>

        <p>提交/重置按钮: <input type="submit" value="提交"><input type="reset" value="重置"></p>
        
</fieldset>
</form>
<script>
             function validateForm(){
                 var x = document.forms['myForm']['fname'].value;
                 if(x == null || x == ''){
                     alert("姓必须填写");
                     return false;
                 }
             }
</script>
</body>
</html>